<template>
    <div>
        <c-title text="查看收款码"></c-title>
        <div class="payee_qr_code">
            <img :src="thumb" alt="" />
            <div class="t-c store">{{ name }}</div>
            <div class="line">
                <div class="line-center"></div>
            </div>
            <img class="qr-code" ref="qrCodeImageLarge" :src="code" alt="">
            <div style="margin-bottom: 1rem;" class="btn" @click="downloadImage">下载</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            code: "",
            thumb:"",
            name:""
        };
    },
    activated() {
        this.getData();
    },
    methods: {
        getData() {
            $http.post('plugin.zhixianggou.api.merchant.get-store-code', { store_id: this.$route.params.store_id }, '.').then(res => {
                if (res.result) {
                    console.log(res.data, 'data===');
                    this.code = res.data.code;
                    this.name = res.data.name;
                    this.thumb = res.data.thumb;
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        downloadImage() {
            const image = this.$refs.qrCodeImageLarge; // 获取大图的引用
            const imageUrl = image.src;

            // 创建一个 a 标签
            const link = document.createElement('a');
            link.href = imageUrl;
            link.download = 'qr_code.png'; // 设置下载的文件名

            // 将 a 标签添加到 DOM 中
            document.body.appendChild(link);

            // 触发点击事件
            link.click();

            // 移除 a 标签
            document.body.removeChild(link);
        }
    }
};
</script>

<style scoped lang='scss'>
.payee_qr_code {
    margin: .625rem .75rem;
    border-radius: .5rem;
    padding-top: 1.5625rem;
    padding-bottom: 1.8125rem;
    background-color: #FFFFFF;

    .line {
        position: relative;
        margin-top: 1.2813rem;
        margin-bottom: 1.4688rem;

        &::before {
            content: "";
            position: absolute;
            left: -0.4063rem;
            top: 0;
            width: 1.125rem;
            height: 1.125rem;
            background: #F5F5F5;
            transform: translateY(-50%);
            border-radius: 50%;

        }

        &::after {
            content: "";
            position: absolute;
            right: -0.4063rem;
            top: 0;
            width: 1.125rem;
            height: 1.125rem;
            background: #F5F5F5;
            transform: translateY(-50%);
            border-radius: 50%;

        }
    }

    .line-center {
        border-bottom: 1px dotted #AAAAB3;
        margin: 0 .9688rem;
    }

    .qr-code {
        margin-bottom: 1.375rem;
        width: 7.5rem;
        border-radius: 0;
        height: 7.5rem;
    }

    .btn {
        margin: 0 auto;
        width: 10rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--themeBaseColor);
        border-radius: 1.875rem;

        font-weight: 500;
        font-size: .9375rem;
        color: #FFFFFF;

    }

    .store {
        font-weight: bold;
        font-size: 1rem;
        margin-top: .875rem;
        color: #00001C;
    }

    img {
        width: 5rem;
        height: 5rem;
        margin: 0;
        border-radius: 100%;
    }
}
</style>